<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>widget</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="css/component.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h4 style="color: #337ab7;">Bootstrap只排版，组件行为自定义</h4>
        <div class="row">
            <div class="col-xs-3 col-md-1">
                <a class="btn btn-default" href="https://github.com/jvsheng/widget/blob/master/widget/api.md">API文档</a>
            </div>
            <div class="col-xs-3 col-md-1 col-xs-push-1">
                <a href="https://github.com/jvsheng/widget/blob/master/widget/js/component.js" class="btn btn-default">js源代码</a>
            </div>
        </div>
        <section>
            <h3>ToolTip</h3>
            <div class="row">
                <div class="col-xs-3">
                    <button class="btn btn-default" jqr-tooltip="jqr-tooltip" direction="bottom">ToolTip</button>
                </div>

                <div class="col-xs-3">
                    <button class="btn btn-default" jqr-tooltip="jqr-tooltip" direction="left">ToolTip</button>
                </div>

                <div class="col-xs-3">
                    <button class="btn btn-default" jqr-tooltip="jqr-tooltip" direction="top">ToolTip</button>
                </div>

                <div class="col-xs-3">
                    <button class="btn btn-default" jqr-tooltip="jqr-tooltip" direction="right">ToolTip</button>
                </div>
            </div>
        </section>

        <br>

        <section>
            <h3>下拉框</h3>
            <div class="row">
                <div class="col-md-2 col-xs-5 jqr-dropdown">
                    <div data-toggle="jqr-dropdown" class="col-xs-12" style="height: 30px; border: 1px solid darkgray; line-height: 30px;text-indent: .5em;border-radius: 5px"></div>

                    <ul class="jqr-dropdown-menu">
                        <li>马伯庸</li>
                        <li>斯库里</li>
                        <li>使徒子</li>
                        <li>风息神泪</li>
                    </ul>
                </div>

            </div>
        </section>


        <br>
        <section>
            <h3>Dialog</h3>
            <div class="row">
                <div class="col-xs-3">
                    <button class="btn btn-default" data-toggle="jqr-dialog" data-target="#di1">弹出层</button>
                    <div class="dialog" id="di1">
                        <div class="dialog-content">
                            <div class="dialog-header">
                                <p>jqr dialog</p>
                            </div>

                            <div class="dialog-body">
                                <p>the body of dialog</p>
                            </div>

                            <div class="dialog-footer">
                                <div class="button dialog-close">close</div>
                                <div class="button dialog-submit">save</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <br>
        <section>
            <h3>分页</h3>
            <div class="row">
                <div class="col-xs-12 col-md-12">
                    <div id='page_1' class="jqr-pagination" data-maxPage="8" data-currentPage="2"></div>
                </div>
            </div>
        </section>

        <br>
        <section>
            <div class="row">
                <div class="col-xs-10 col-md-6">
                    <h3>日历</h3>
                   <div class="calender_wrap">
                       <div data-toggle="jqr-calender" style="border-radius: 5px; border: 1px solid gray; padding: 3px 5px; height: 30px;" class="col-md-3">点击选择日期</div>
                   </div>
                </div>

                <div class="col-xs-10 col-md-6">
                    <h3>带日期选择限制的日历</h3>
                    <div class="calender_wrap">
                        <div id="special" data-toggle="jqr-calender" data-limitDay="8" style="border-radius: 5px; border: 1px solid gray; padding: 3px 5px; height: 30px;" class="col-md-3">点击选择日期</div>
                    </div>
                </div>
            </div>
        </section>

        <br>
        <section>
            <div class="row">
                <h3>轮播图</h3>
                <div class="col-xs-10 col-md-12">
                    <div class="jqr-carousel">
                        <ul class="items">
                            <li><a href="#"><img src="../全屏%20滚动切换效果/images/bg-1.png" alt=""></a></li>
                            <li><a href="#"> <img src="../全屏%20滚动切换效果/images/bg-2.png" alt=""></a></li>
                            <li><a href="#"><img src="../全屏%20滚动切换效果/images/bg-3.png" alt=""></a></li>
                            <li><a href="#"><img src="../全屏%20滚动切换效果/images/bg-4.png" alt=""></a></li>
                        </ul>

                        <span class="before">&lt;</span>
                        <span class="after">&gt;</span>
                    </div>
                </div>
            </div>
        </section>


        <br>
        <br>
        <br>
    </div>
<script src="js/jquery.min.js"></script>
<script src="js/component.js"></script>

    <script>
    </script>
</body>
</html>